<html lang="zh-CN"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>视频播放</title>
    <style>
      body,html {
          height: auto;
        overflow: hidden;
        margin: 0;
      }
      .hint {
        font-size: 14px;
        line-height: 3em;
        color: gray;
      }
      #url {
        width: 100%;
      }
  
      .btn-container {
        margin: 10px;
        text-align: center
      }

      .btn{
        display: inline-block;
        height: 36px;
        line-height: 36px;
        padding: 0 20px;
        border-radius: 5px;
        background: #2196F3;
        color: #fff;
        font-size: 13px;
        text-decoration: none
      }
  
      #myPlayer {
        width: 100%;
      }
      .normal {
        color: green;
        margin: 5px;
      }
      .error {
        color: red;
        margin: 5px;
      }
    </style>
    <script src="https://teachedu.oss-cn-beijing.aliyuncs.com/public/js/ezuikit.js"></script>
    <script src="https://teachedu.oss-cn-beijing.aliyuncs.com/public/js/jquery-2.1.1.min.js"></script>
  <script src="https://open.ys7.com/sdk/js/2.0/js/hls.min.js"></script>
  <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 
  <style>
     .ratioSwitch{
      position: fixed;
      z-index: 1000;
      width:48px;
      top:10px;
      right:10px;
    }

    .ratioSwitch h2{
      border:1px solid #fff;
      border-radius: 2px;
      color:#fff;
      font-size: 13.6px;
      font-weight: normal;
      padding:3px 0;
      text-align: center
    }

    .ratioSwitch ul{
      background: rgba(255,255,255,0.16);
      color:#fff;
      list-style: none;
      padding:0;
      margin:0;
      border-radius: 2px;
      text-align: center;
      line-height: 2;
      font-size: 13.6px;
    }

  .ratioSwitch li{
    list-style: none;
    padding:0;
    margin:0
  }
  </style>
</head>
  
  <body>
    <section class="ratioSwitch" id="ratioSwitch">
      <h2>标清</h2>
      <ul>
        <li id="r_common">标清</li>
        <li id="r_high">高清</li>
      </ul>
    </section>
      <video id="myPlayer" autoplay="" src="" controls="" playsinline="" webkit-playsinline="">
      </video>
    <script>
        var search=location.search;
        var url = '';
        if(search){
          try{
              var searchArr = search.substring(1,search.length).split('&');
              url  = searchArr[0].split('=')[1]; 
          }catch(err){
              console.log(err)
          }
      }else{
          let videoObj = JSON.parse(localStorage.getItem('videoObj'));
          url = videoObj.hls;
          poster =  videoObj.thumbUrl;
          $("#r_common").data('url',videoObj.hls)
          $("#r_high").data('url',videoObj.hlsHd)
          $('#myPlayer').attr("poster", poster);
          playVideo(url);
      }

       //一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以 
      document.getElementById('myPlayer').play(); 
      //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效 
      document.addEventListener("WeixinJSBridgeReady", function () { 
          document.getElementById('myPlayer').play(); 
      }, false); 

       $(function(){
        // 调出清晰度选择面板
        $("#ratioSwitch h2").click(function(){
          $("#ratioSwitch ul").next().show()
        })

        // 切换清晰度
        $("#ratioSwitch li").click(function(){
          let _ratio = $(this).text();
          url = $(this).data('url');
          $("#ratioSwitch h2").text(_ratio);
          $("#ratioSwitch ul").hide();
          playVideo($(this).data('url'))
        })
      })

      function playVideo(url){
        $('#myPlayer').attr("src", url);
        var player = new EZUIKit.EZUIPlayer('myPlayer');
        //一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以 
        player.play(); 
        document.getElementById('myPlayer').play();
        //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效 
        document.addEventListener("WeixinJSBridgeReady", function () { 
          document.getElementById('myPlayer').play();
          player.play(); 
          if(url){
            localStorage.removeItem('videoObj')
          }else{
            alert('您没有查看权限')
          }
        }, false); 
      }

    </script>
   
</body>
</html>